<template>
	<view class="navbar-container fadeIn">
		<view class="ym-navbar-fixed" :style="[_background]" :class="{ 'ym-border-bottom': borderBottom && !ym_immersive }">
			<!-- 状态栏占位盒子 -->
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="navbar-inner" :style="[navbarInnerStyle]">
				<view class="ym-left-warp" @tap.stop="goBack">
					<slot name="left">
						<view class="back-wrap">
							<image v-show="!ym_immersive" class="icon-back" src="/static/icons/back.png" mode="aspectFill"></image>
							<image v-show="ym_immersive" class="icon-back white" src="/static/icons/back-w.png" mode="aspectFill"></image>
						</view>
					</slot>
				</view>
				<view v-if="showTitle" class="ym-center-warp" :style="[navbarcenterStyle]">
					<slot name="center"></slot>
					<view class="nav-title" :style="{color:titleColor}">{{ title }}</view>
				</view>
				<view class="ym-right-warp"><slot name="right"></slot></view>
			</view>
		</view>
		<!-- 导航条占位盒子，解决定位后的高度坍塌 -->
		<view v-if="!immersive" class="ym-navbar-palceholder" :style="{ height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
	</view>
</template>

<script>
const systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
console.log(menuButtonInfo);
// #endif
export default {
	name: 'ym-navbar',
	props: {
		title: {
			type: String,
			default: ''
		},
		// 对象形式，因为用户可能定义一个纯色，或者线性渐变的颜色
		background: {
			type: Object,
			default() {
				return {
					background: '#fff',
					_immersive: false
				};
			}
		},
		// 是否显示标题
		showTitle: {
			type: Boolean,
			default: true
		},
		borderBottom: {
			type: Boolean,
			default: true
		},
		// 标题的宽度，如果需要自定义右侧内容，且右侧内容很多时，可能需要减少这个宽度，单位rpx
		titleWidth: {
			type: [String, Number],
			default: '250'
		},
		// 是否沉浸式，允许fixed定位后导航栏塌陷，仅fixed定位下生效
		immersive: {
			type: Boolean,
			default: false
		},
		scrollTop: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			menuButtonInfo: menuButtonInfo,
			ym_immersive: false,
			titleColor:'#fff', // 标题颜色 
		};
	},
	computed: {
		_background() {
			if (this.scrollTop < 100) {
				return { background: 'rgba(0,0,0,0)' };
			} else {
				return this.background;
			}
		},
		showback() {
			return getCurrentPages().length > 1;
		},
		// 导航条中间的标题样式
		navbarcenterStyle() {
			let style = {};
			// #ifndef MP
			style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
			style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
			// #endif
			// #ifdef MP
			// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
			let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
			// let rightButtonWidth = systemInfo.windowWidth ;
			let span = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2;
			style.left = span + 'px';
			style.right = rightButtonWidth + span + 'px';
			// #endif
			style.width = uni.upx2px(this.titleWidth) + 'px';
			if (this.ym_immersive) {
				style.color = 'rgba(0,0,0,0)';
			}
			return style;
		},
		// 导航栏内部盒子的样式
		navbarInnerStyle() {
			let style = {};
			// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
			style.height = this.navbarHeight + 'px';
			// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
			// #ifdef MP
			// 小程序按钮宽度
			let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
			style.marginRight = rightButtonWidth + 'px';
			// #endif
			return style;
		},
		// 导航栏高度
		navbarHeight() {
			// #ifdef APP-PLUS || H5
			return this.height ? this.height : 44;
			// #endif
			// #ifdef MP
			// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
			// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
			// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
			let height = systemInfo.platform == 'ios' ? 44 : 48;
			return this.height ? this.height : height;
			// #endif
		},
		statusBarHeight() {
			return systemInfo.statusBarHeight;
		}
	},
	watch: {
		// 滚动监听
		scrollTop(newVal) {
			if (this.immersive) {
				this.ym_immersive = newVal <= 100;
				this.titleColor = newVal <= 100?"#ffffff":"#333333";
			}
		}
	},
	mounted() {
		this.ym_immersive = this.immersive;
	},
	methods: {
		goBack() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack();
			} else {
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		}
	}
};
</script>

<style lang="scss">

.ym-navbar-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 991;
}

.status-bar {
	// background-color: red;
}
.navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.ym-left-warp {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;

		.back-wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 56rpx;
			height: 56rpx;
		}
		.icon-back {
			width: 36rpx;
			height: 36rpx;
			padding: 10rpx;
			padding-right: 16rpx;
			position: relative;
					
			&.white::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				z-index: -1;
				background-color: rgba(0, 0, 0, 0.3);
			}
		}

		.title {
			margin-left: 20rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #ffffff;
		}
	}

	.ym-center-warp {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		position: absolute;
		left: 0;
		right: 0;
		height: 60rpx;
		text-align: center;
		flex-shrink: 0;

		.nav-title {
			font-weight: 600;
			font-size: 36rpx;
		}
	}

	.ym-right-warp {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 14rpx 24rpx 14rpx 14rpx;
	}
}

.ym-border-bottom {
	border-bottom: 1rpx solid #eee;
}
.ym-navbar-palceholder {
}

.fadeIn {
	animation: fade-in 0.8s;
}
@keyframes fade-in {
	0%{
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
}
</style>
